<!--
 * @Autor: dingxiaolin
 * @Date: 2021-06-09 08:54:48
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-07-21 10:27:17
-->
<template>
    <!-- <router-view /> -->
    <router-view v-slot="{ Component }">
        <transition name="zoom-fade" mode="out-in" appear>
            <keep-alive :include="keepAliveComponents">
                <div id="contentBox" class="ant-table-content1">
                    <component :is="Component" />
                </div>
            </keep-alive>
        </transition>
    </router-view>
</template>

<script lang='ts'>
import { defineComponent, PropType, reactive, toRefs, ref, computed, nextTick, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'
export default defineComponent({
    name: 'PageView',
    components: {},
    props: {},
    emits: [],
    setup(props, ctx) {
        const router = useRouter()
        const store = useStore()
        const state = reactive({})
        // 需要缓存的路由组件
        const keepAliveComponents = computed(() => store.state.asyncRoute.keepAliveComponents)

        onMounted(() => {})
        return {
            ...toRefs(state),
            keepAliveComponents
        }
    }
})
</script>

<style lang='scss' scoped>
#contentBox {
    display: flex;
    flex-direction: column;
    height: 100%;
}
</style>
